<template>
    <div class="container">
        <div class="sub-title">个人信息</div>
        <div class="user-wrap">
            <van-image round width="5rem" height="5rem" :src="userInfo.avatar" />
            <div class="user-info">
                <h4>{{ userInfo.userName }} ({{ userInfo.realName }})</h4>
                <div style="display:flex;justify-content: space-between">
                  <van-button type="primary" size="small" @click="editPwd" round>修改密码</van-button>
                  <van-button type="default" size="small" @click="logout" round>退出登录</van-button>
                </div>

            </div>
        </div>
        <van-cell-group>
            <van-cell title="性别" :value="userInfo.sex == 2 ? '女' : '男'" />
            <van-cell title="联系电话" :value="userInfo.phone" />
            <van-cell title="出生日期" :value="userInfo.birthDate" />
            <van-cell title="联系地址" :value="userInfo.address" />
            <van-cell title="创建日期" :value="userInfo.createTime" />
        </van-cell-group>
        <div class="sub-title">我的搜索记录</div>
        <p v-if="!historyList.length" class="no-data">暂无记录</p>
        <div class="list">
            <p v-for="(item, index) in historyList" :key="item" class="list-item" @click="toDetail(item)"> {{
                item.keyWords }}</p>
        </div>
        <div class="sub-title">我的浏览记录</div>
        <p v-if="!viewList.length" class="no-data">暂无记录</p>
        <div class="list">
            <p v-for="(item, index) in viewList" :key="item" class="list-item" @click="toDetail(item)">
                {{
                item.newTitle }}</p>
        </div>

        <van-popup v-model:show="showChangePwd" position="bottom" closeable :close-on-click-overlay="false"
            close-on-popstate>
            <van-form @submit="onSubmit" style="margin-top: 40px;">
                <van-cell-group inset>
                    <van-field v-model.trim="newPwd" required name="新密码" label="新密码" placeholder="请输入" maxlength="12"
                        autosize show-word-limit :rules="[{ required: true, message: '请填写新密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
import Api from '@/api/homePage.js';

const historyList = ref([])
const viewList = ref([])
const userInfo = reactive({
    userName: ''
})
onMounted(() => {
    // 请求数据
    Api.getInfo().then(res => {
        userInfo.userName = res.data.sysUser.userName
        userInfo.realName = res.data.sysUser.realName
        userInfo.avatar = res.data.sysUser.avatar
        userInfo.sex = res.data.sysUser.sex
        userInfo.phone = res.data.sysUser.phone
        userInfo.birthDate = res.data.sysUser.birthDate
        userInfo.address = res.data.sysUser.address
        userInfo.createTime = res.data.sysUser.createTime
    })
    searchHistoryList()
    searchViewList()
})
//新闻详情
const toDetail = (row) => {
    router.push({
        name: 'newsDetail',
        query: {
            id: row.id
        }
    })
}

// 搜索记录
const searchHistoryList = () => {
    Api.historyList({
        pageNo: 1,
        pageSize: 10,
        userId: localStorage.getItem('userId')
    }).then(res => {
        historyList.value = res.data.list
    })
}

// 浏览记录
const searchViewList = () => {
    Api.viewList({
        pageNo: 1,
        pageSize: 10,
        userId: localStorage.getItem('userId')
    }).then(res => {
        viewList.value = res.data.list
    })
}
// 修改密码
const showChangePwd = ref(false);
const newPwd = ref('');
const editPwd = () => {
    showChangePwd.value = true;
}
const onClose = () => {
    showChangePwd.value = false;
    newPwd.value = '';
}
const onSubmit = (values) => {
    if (newPwd.value) {
        const toast = Toast.loading({
            message: '加载中...',
            forbidClick: true,
        });
        Api.resetPwd({
            id: localStorage.getItem('userId'),
            password: newPwd.value
        }).then(res => {
            Toast.success("修改成功！");
            onClose()
            localStorage.removeItem('token')
          localStorage.removeItem('userId')
            router.push('/login')
        })

        onClose()
    }
};

// 退出登录
const logout = () => {
    Api.logout().then(res => {
      localStorage.removeItem('token')
      localStorage.removeItem('userId')
      router.push("/login")
    })
}

</script>

<style lang="scss" scoped>
.container {
    padding: 10px;
    background-color: #f7f8fa;

    .sub-title {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .user-wrap {
        background-color: #fff;
        padding: 10px 15px;
        display: flex;
        align-items: center;

        .user-info {
            margin-left: 10px;
            flex: 1;

            h4 {
                margin: 6px 0;
            }
        }
    }

    .list {
        background-color: #fff;
        padding: 2px 15px;
    }
}
</style>